<template>
    <el-scrollbar class="aside_menu_scroll">
        <el-menu :router="true"
            :active-text-color="primaryColor"
            :default-active="route.path"
            :background-color="asideBackgroundColor" :collapse="asideMenuInfo.menuCollapse">
            <NavItem :asideMenuList="asideMenuList"></NavItem>
        </el-menu>
    </el-scrollbar>
</template>

<script setup lang='ts'>
    import { ref, reactive } from "vue";
    import styles from "@/styles/variables.module.scss"
    import type { MenuRouteInfo } from "@/types/type";
    import { useAsideMenuInfoStore } from "@/store/asideMenuInfo";
    import { useRoute } from "vue-router";
    const asideMenuInfo = useAsideMenuInfoStore()
    const asideMenuList = reactive<Array<MenuRouteInfo>>(asideMenuInfo.menuList)
    const primaryColor = ref(styles.primaryColor)
    const asideBackgroundColor = ref(styles.asideBackgroundColor)
    const route = useRoute()
</script>

<style scoped lang="scss">
    .aside_menu_scroll {
        height: 100%;
        border-right: 1px $primaryColor solid;
        background-color: $asideBackgroundColor;

        .el-menu {
            border-right: 0;
        }
    }

    // 此处不能使用scss全局变量
    .el-scrollbar {
        --el-scrollbar-bg-color: purple;
        --el-scrollbar-hover-bg-color: purple;
    }
</style>